<template>
  <div>
    <el-form ref="form" label-position="right" :model="currentRow" label-suffix="："
             label-width="0px">
      <div style="text-align: center">
        <upload-img
          trigger="button"
          :size-limit="5"
          @update="setFormImg"></upload-img>
      </div>


      <el-table border :data="currentRow.picList" class="m-t-24">
        <el-table-column label="图片名称">
          <template slot-scope="scope">
            <el-form-item :prop="`picList.${scope.$index}.name`">
              <el-input v-model="scope.row.name" placeholder="请输入图片名称" :maxlength="20" style="width:100%"></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="拍摄时间" width="240">
          <template slot-scope="scope">
            <el-form-item :prop="`picList.${scope.$index}.shotTime`">
              <el-date-picker
                v-model="scope.row.shotTime"
                type="datetime"
                value-format="timestamp"
                placeholder="选择拍摄时间">
              </el-date-picker>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="图片" width="110">
          <template slot-scope="scope">
            <el-image   @click="_previewImg(0,currentRow.picList)" style="width: 60px; height: 60px" fit="scale-down" :src="constUrl + scope.row.url"></el-image>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="90">
          <template slot-scope="scope">
            <el-button type="text" class="delete_button" @click="handleDeleteImg(scope.$index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
    <picture-viewer ref="imageViewer"></picture-viewer>
  </div>

</template>
<script>
import UploadImg from '@/components/upload-img'
import ItemMixins from "./item.mixins";
import PictureViewer from '@/components/picture-viewer/index-name';
import constUrl from '@/services/env'

export default {
  props: ['value', 'isLook'],
  mixins: [ItemMixins],
  components: {UploadImg,PictureViewer},
  data() {
    return {
      constUrl,
    }
  },
  computed: {
    currentRow: {
      get() {
        return this.value
      },
      set(value) {
        this.$emit('input', value)
      }
    }
  },
  methods: {
    // 查看大图
    _previewImg(index, urls) {
      const urlList = JSON.parse(JSON.stringify(urls))
      urlList.map(x => {
        x.url = this.constUrl + x.url
        return x
      })
      // 显示照片查看器
      this.$refs.imageViewer.showViewer(urlList, index)
    },
    // 删除图片
    handleDeleteImg(index) {
      this.currentRow.picList.splice(index, 1)
    },
    // 上传成功后处理图片
    setFormImg(path) {
      let item = {
        name: '',
        url: path
      }
      this.currentRow.picList.push(item)
    },
  },
  mounted() {
  }
}
</script>

<style lang="less" scoped>
  .delete_button{
    color: #ff4d51;

  }
  // 修改table
   /deep/.el-table__row{
      background: white !important;
    }
/deep/.el-table .el-table__body tr.current-row > td {
  background-color: #1990FE !important;
}
/deep/.el-table .el-table__body tr:hover > td {
  background-color: #1990FE !important;
}
</style>
